// 指定用户列表的ui组件
import React from 'react'
import PropTypes from 'prop-types'
import { WingBlank, WhiteSpace, Card } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'

const { Header, Body } = Card
class UserList extends React.Component {
  static propTypes = {
    userList: PropTypes.array.isRequired
  }
  render() {
    const { userList } = this.props
    return (
      <WingBlank style={{ marginBottom: 50, marginTop: 50 }}>
        <QueueAnim type='scale'>
          {userList.map(user => (
            <div key={user._id}>
              <Card
                onClick={() => this.props.history.push(`/chat/${user._id}`)}
              >
                <Header
                  thumb={`http://119.3.254.20:3000/public/images_react/${user.header}.png`}
                  extra={user.username}
                />
                <Body>
                  <div>职位: {user.post}</div>
                  {user.company ? <div>公司: {user.company}</div> : null}
                  {user.salary ? <div>月薪: {user.salary}</div> : null}
                  <div>描述: {user.info}</div>
                </Body>
              </Card>
              <WhiteSpace />
            </div>
          ))}
        </QueueAnim>
      </WingBlank>
    )
  }
}
export default withRouter(UserList)
